<template>
  <div class="order">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      type="border-card"
    >
      <!-- <el-tab-pane label="全部订单" :name="0">
        <List :titleAll="table" />
      </el-tab-pane>
      <el-tab-pane :label="item.label" v-for="item in table" :key="item.name">
        <List :title="table" />
      </el-tab-pane>
    </el-tabs> -->
      <el-tab-pane label="全部订单" :name="0">
        <List :title="table" />
      </el-tab-pane>
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="item in data"
        :key="item.name"
      >
        <List :title="tableTitle(item.label)"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { ElTabPane, ElTabs } from "element-plus";
import service from "../../../mock/indexOrder.js";
import List from "./components/List";
import { ref, onMounted ,computed} from "vue";
export default {
  setup() {
    const data = ref([
      { label: "待付款", name: "2" },
      { label: "代发货", name: "3" },
      { label: "待收款", name: "4" },
      { label: "交易成功", name: "5" },
      { label: "退款中", name: "6" },
      { label: "交易失败", name: "7" },
    ]);
    const table = ref([]);
    // const tableTitle=ref([]);
    onMounted(async () => {
      const tableData = await service.getDate();
      table.value = tableData.data.result;
      console.log(tableData.data.result);
    });
    // tableTitle.value=table.value.filter(item=>item)
    const tableTitle=computed(()=>{
      return (i)=>{
        return table.value.filter(item=>item.label==i)
      }
    })
    // const tableTitle = (type)=>{
    //   return table.value.find(v=>v.label=== type)?.name||''
    // }
    return {
      data,
      table,
      tableTitle
    };
  },
  // computed:{
  //     tableTitle(){
  //       return function(i){
  //         table.filter((item)=>item.label==i)
  //       }
  //     }
  //   },
  components: {
    List,
    ElTabPane,
    ElTabs,
  },
};
</script>
<style lang="less" scoped>
.order {
  padding: 0px;
  // background: brown;
  height: 100%;
  // .el-tabs__item {
  // }
  /deep/.el-tabs {
    border: none;
    box-shadow: none;
    background: #f5f7fa;
    height: 100%;
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            padding-left: 100px;
          }
        }
      }
      // background: #103c86;
    }
    .el-tabs__content {
      background: #ffffff;
      box-sizing: border-box;
      border-radius: 20px;
      height: 100%;
      padding: 0;
    }
  }
}
// /deep/.demo-tabs > .el-tabs__content {
//   padding: 32px;
//   // background-color: #f4f5f7;
//   // color: #6b778c;
//   font-size: 32px;
//   font-weight: 600;
// }
/deep/.el-container{
  margin-left: 100px;
}
</style>
